<template>
  <div>
    <div class="marBox">
      <el-button type="primary" size="medium" @click="dailogShow(1)">新增句子</el-button>
    </div>
    <el-table :data="currentIndex" border style="width: 100%">
      <el-table-column prop="wordContent" label="内容"></el-table-column>
      <el-table-column prop="wordType" label="句子类型" width="100"></el-table-column>
      <el-table-column prop="provenance" label="句子出处" width="300"></el-table-column>
      <!-- <el-table-column prop="createDate" label="创建时间" width="200"></el-table-column> -->
      <el-table-column label="是否发布" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isPush" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="danger" @click="remove(scope.row.wordId)" size="small">移除</el-button>
          <el-button type="primary" size="small" @click="dailogShow(2,scope.row)">编辑</el-button>
          <el-button type="info" size="small" @click="testPush(scope.row)">推送</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="marBox">
      <el-pagination
        @size-change="(val)=>{this.pageSize=val}"
        @current-change="(val)=>{this.pageIndex=val}"
        :current-page="pageIndex"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      :title="dialogType===1?'新增句子':'修改句子'"
      :visible.sync="isShow"
      v-if="isShow"
      :close-on-click-modal="false"
      width="30%"
    >
      <div class="marBox">
        <el-input v-model="word.wordType" placeholder="输入句子类型，例：人生"></el-input>
      </div>
      <div class="marBox">
        <el-input type="textarea" :rows="6" placeholder="请输入句子内容" v-model="word.wordContent"></el-input>
      </div>
      <div class="marBox">
        <el-input v-model="word.provenance" placeholder="输入句子出处"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="wordSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableList: [],
      dialogType: 0, //0无弹框，1新增，2修改
      isShow: false,
      word: {
        wordContent: "",
        wordType: "",
        provenance: ""
      },
      pageIndex: 1, //当前页
      pageSize: 10, //每页展示数
      total: 5 //总条数
    };
  },
  mounted() {
    this.load();
  },
  computed: {
    currentIndex() {
      this.total = this.tableList.length; //设置总条数
      // 计算当前页的数据
      return this.tableList.filter((item, index) => {
        return Math.floor(index / this.pageSize) === this.pageIndex - 1;
      });
    }
  },
  methods: {
    load() {
      this.$axios.get("/api/aWord").then(res => {
        this.tableList = res.data;
      });
    },
    testPush(row) {
      this.$notify({
        title: row.wordType,
        message:
          row.wordContent +
          "</br><p><i><b>出自：</b></i><b>" +
          row.provenance +
          "</b></p>",
        dangerouslyUseHTMLString: true,
        duration: 0
      });
    },
    dailogShow(num, row) {
      this.dialogType = num;
      this.isShow = true;
      if (num === 2) {
        this.word = {
          wordContent: row.wordContent,
          wordType: row.wordType,
          provenance: row.provenance,
          wordId: row.wordId
        };
      } else {
        this.word = {
          wordContent: "",
          wordType: "",
          provenance: "",
          wordId: null
        };
      }
    },
    wordSubmit() {
      let type = this.dialogType === 1 ? "put" : "post";
      this.$axios({
        method: type,
        url: "/api/aWord",
        data: this.word
      }).then(res => {
        this.load();
        this.isShow = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.marBox {
  margin: 10px 0px;
}
</style>